<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>韩城照明 - 高级太阳能模拟</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <i class="fas fa-solar-panel"></i>
                <span>韩城照明</span>
            </div>
            <div class="nav-menu">
                <a href="#simulator" class="nav-link">模拟器</a>
                <a href="#features" class="nav-link">特性</a>
                <a href="#about" class="nav-link">关于</a>
            </div>
            <div class="nav-toggle">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 英雄区域 -->
        <section class="hero-section">
            <div class="hero-content">
                <h1 class="hero-title">高级太阳能模拟系统</h1>
                <p class="hero-subtitle">精准模拟太阳光照，优化您的太阳能解决方案</p>
                <button class="cta-button" onclick="scrollToSimulator()">
                    <i class="fas fa-play"></i>
                    开始模拟
                </button>
            </div>
            <div class="hero-visual">
                <div class="solar-animation">
                    <div class="sun-orbit">
                        <div class="sun"></div>
                    </div>
                    <div class="solar-panels"></div>
                </div>
            </div>
        </section>

        <!-- 模拟器区域 -->
        <section id="simulator" class="simulator-section">
            <div class="container">
                <h2 class="section-title">太阳能模拟器</h2>
                <div class="simulator-grid">
                    <!-- 控制面板 -->
                    <div class="control-panel">
                        <h3>控制参数</h3>
                        
                        <div class="control-group">
                            <label for="time-slider">
                                <i class="fas fa-clock"></i>
                                时间 (24小时制)
                            </label>
                            <input type="range" id="time-slider" min="0" max="24" value="12" step="0.5">
                            <span class="value-display" id="time-value">12:00</span>
                        </div>

                        <div class="control-group">
                            <label for="angle-slider">
                                <i class="fas fa-angle-up"></i>
                                太阳角度
                            </label>
                            <input type="range" id="angle-slider" min="0" max="90" value="45">
                            <span class="value-display" id="angle-value">45°</span>
                        </div>

                        <div class="control-group">
                            <label for="intensity-slider">
                                <i class="fas fa-sun"></i>
                                光照强度
                            </label>
                            <input type="range" id="intensity-slider" min="0" max="100" value="75">
                            <span class="value-display" id="intensity-value">75%</span>
                        </div>

                        <div class="control-group">
                            <label for="weather-select">
                                <i class="fas fa-cloud"></i>
                                天气条件
                            </label>
                            <select id="weather-select">
                                <option value="sunny">晴天</option>
                                <option value="cloudy">多云</option>
                                <option value="overcast">阴天</option>
                            </select>
                        </div>
                    </div>

                    <!-- 可视化区域 -->
                    <div class="visualization-panel">
                        <div class="simulation-canvas">
                            <div class="sky-background"></div>
                            <div class="sun-position" id="sun-position"></div>
                            <div class="solar-panel" id="solar-panel"></div>
                            <div class="light-rays" id="light-rays"></div>
                            <div class="efficiency-display">
                                <div class="efficiency-circle">
                                    <span id="efficiency-value">85%</span>
                                    <small>发电效率</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="metrics">
                            <div class="metric-card">
                                <i class="fas fa-bolt"></i>
                                <h4>当前功率</h4>
                                <span id="current-power">3.2 kW</span>
                            </div>
                            <div class="metric-card">
                                <i class="fas fa-chart-line"></i>
                                <h4>日发电量</h4>
                                <span id="daily-energy">15.6 kWh</span>
                            </div>
                            <div class="metric-card">
                                <i class="fas fa-dollar-sign"></i>
                                <h4>节省费用</h4>
                                <span id="savings">¥23.4</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 特性区域 -->
        <section id="features" class="features-section">
            <div class="container">
                <h2 class="section-title">核心特性</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-eye"></i>
                        </div>
                        <h3>实时可视化</h3>
                        <p>通过3D可视化技术，直观展示太阳能板的工作状态和效率变化</p>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-cogs"></i>
                        </div>
                        <h3>精准模拟</h3>
                        <p>基于真实物理模型，精确计算不同条件下的太阳能发电效率</p>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                        <h3>响应式设计</h3>
                        <p>完美适配各种设备，随时随地进行太阳能模拟和分析</p>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-chart-bar"></i>
                        </div>
                        <h3>数据分析</h3>
                        <p>提供详细的数据报告和图表，帮助您做出最佳决策</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 关于区域 -->
        <section id="about" class="about-section">
            <div class="container">
                <div class="about-content">
                    <div class="about-text">
                        <h2>关于韩城照明</h2>
                        <p>韩城照明致力于提供最先进的太阳能解决方案。我们的高级模拟系统帮助客户优化太阳能配置，最大化能源产出效率。</p>
                        <p>通过结合最新的技术和专业的工程知识，我们为客户提供可靠、高效的太阳能系统设计和咨询服务。</p>
                        <div class="contact-info">
                            <p><i class="fas fa-envelope"></i> info@hancheng-lighting.com</p>
                            <p><i class="fas fa-phone"></i> +86 400-888-8888</p>
                        </div>
                    </div>
                    <div class="about-visual">
                        <div class="company-stats">
                            <div class="stat">
                                <h3>500+</h3>
                                <p>成功项目</p>
                            </div>
                            <div class="stat">
                                <h3>10年</h3>
                                <p>行业经验</p>
                            </div>
                            <div class="stat">
                                <h3>98%</h3>
                                <p>客户满意度</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-brand">
                    <i class="fas fa-solar-panel"></i>
                    <span>韩城照明</span>
                </div>
                <div class="footer-links">
                    <a href="#simulator">模拟器</a>
                    <a href="#features">特性</a>
                    <a href="#about">关于</a>
                </div>
                <div class="footer-social">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-linkedin"></i></a>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 韩城照明科技有限公司. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>